import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
// 引用path：别名
import { resolve } from "path";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import vueJsx from '@vitejs/plugin-vue-jsx'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command, mode }) =>{
  const env = loadEnv(mode, process.cwd(), '');
  return {
    plugins: [
      // 插件引用（标准vite插件放这里引用）
      vue(), // vue插件
      vueJsx(), // 支持jsx写法
      AutoImport({
        // 自动引入，不需要手动去写import
        // 这里可以不需要写import调用大部分vue/vue-router/pinia方法
        imports: ["vue", "vue-router", "pinia"],
        // element需要通过resolvers引用
        resolvers: [ElementPlusResolver()],
        // 会自动生成eslint规则，防止eslint报错
        eslintrc: {
          enabled: true,
        },
      }),
      Components({
        // 按需引入，避免没使用的组件也打包
        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
      }),
      viteMockServe({
        mockPath: './src/mock', // mock文件夹路径
        enable: command === 'serve' // 只有开发环境才开启mock
      }),
    ],
  
    resolve: {
      alias: [
        {
          find: "@",
          replacement: resolve(__dirname, "src"),
        },
      ],
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/style/global.scss" as *;',
          api: 'modern-compiler'
        }
      }
    },
    server: {
      host: '0.0.0.0', 
      cors: true,
      port: 8081,
      // proxy: { // 代理
      //   '^/api': { 
      //     target: env.VITE_API_BASEURL, 
      //     rewrite: (path) => path.replace(/^\/api/, ''), 
      //     changeOrigin: true 
      //   }
      // }
    }
  }
});
